
/**
Required Variables:
data_url
hotspots
*/

var posx = 0;
var posy = 0;
var clickable = false;
var action = null;

var hotspots = null;


// Change cursor on specific locations.
function hotspot(X, Y, canvas){
	$(canvas).css({"cursor":"default"});

	for (var i = 0; i < hotspots.length; i++) {
		var x1 = hotspots[i]['x1'];
		var y1 = hotspots[i]['y1'];
		var x2 = hotspots[i]['x2'];
		var y2 = hotspots[i]['y2'];
		var cur = hotspots[i]['cursor'];

		if( x1 <= X && X < x2 && y1 <= Y && Y < y2 ){
				$(canvas).css({"cursor":cur});
				action = hotspots[i]['action'];// action name.
				return true;}}
	return false;}

$(document).ready(function(){
// Load up our data.
$('#screen').text('loading...');
$.post(data_url, { user: 'admin' }, function(data){ hotspots = data;
$('#screen').text(JSON.stringify(hotspots)); }, 'json');

	$("#screen").mousemove(function(e){

		// Get position relative to DIV
		var offset = $("#canvas").offset();
		var x = e.pageX - offset.left;
		var y = e.pageY - offset.top;
		// Make position a percentage.
		posx = Math.round((x / can_wid)*100);
		posy = Math.round((y / can_hgt)*100);

		clickable = hotspot(posx, posy, this);

		$('#data').html('posx= '+posx+' posy= '+posy);
	});

	// ajax
	$("#screen").click(function(){
		if(clickable){
			$(this).text("loading...")
			$.post(data_url, { posx: posx, posy: posy, action: action }, function(data){
				hotspots = data;
				$('#screen').text(JSON.stringify(hotspots));
				}, 'json');
			}
	});
})